<template>
  <div>
    <div class="px-[24px] w-full py-4 gap-3 flex">
      <div class="w-[25%] flex flex-col gap-3">
        <div class="h-[47vh] flex flex-col gap-3">
          <WarningSituation />
          <DeviceUsersNumber />
        </div>
        <DeviceUsersDistribution />
      </div>
      <div class="w-[48%] flex flex-col gap-3">
        <WarningSituationStatistics />
        <EquipmentWearingStatistics />
      </div>
      <div class="w-[25%] flex flex-col gap-3">
        <NewOccurrenceWarning />
        <WarningTrend />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import WarningSituation from './component/WarningSituation.vue'
import DeviceUsersNumber from './component/DeviceUserNumber.vue'
import DeviceUsersDistribution from './component/DeviceUsersDistribution.vue'
import WarningSituationStatistics from './component/WarningSituationStatistics.vue'
import EquipmentWearingStatistics from './component/EquipmentWearingStatistics.vue'
import NewOccurrenceWarning from './component/NewOccurrenceWarning.vue'
import WarningTrend from './component/WarningTrend.vue'
</script>

<style scoped lang="less"></style>
